<template>
  <div class="step-1-container">
    <el-form ref="addForm" :model="addForm" label-position="right" label-width="150px" :rules="formRules">
      <el-form-item label="任务名称" prop="session_name">
        <el-input
          v-model="addForm.session_name"
          placeholder="请输入任务名称"
        />
      </el-form-item>
      <el-form-item label="算法版本" prop="pnc_version">
        <el-select
          v-model="addForm.pnc_version"
        >
          <el-option
            v-for="item in pncList"
            :key="item.version"
            :label="item.version"
            :value="item.version"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="运行方式">
        <el-radio-group v-model="addForm.sim_type" @change="simTypeChange">
          <el-radio label="worldsim"></el-radio>
          <el-radio label="log2world"></el-radio>
          <el-radio label="logsim" disabled></el-radio>
          <el-radio label="amap" ></el-radio>
          <el-radio label="amap_traffic" ></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="场景类型" v-show="addForm.sim_type === 'amap' || addForm.sim_type === 'amap_traffic'">
        <el-select
          clearable
          v-model="addForm.scene_mode"
          placeholder="请选择场景类型"
        >
          <el-option
            v-for="(item,index) in sceneOptions" 
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="动力学">
        <el-select
          v-model="addForm.controller"
        >
          <el-option
            v-for="item in dynamic_model_list"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="自定义节点" prop="ext_workers">
        <el-switch v-model="addForm.ext_workers"></el-switch>
      </el-form-item>
      <el-form-item label="节点信息" v-show="addForm.ext_workers">
        <el-select
          v-model="addForm.ext_workers_id"
        >
          <el-option
            v-for="(item,index) in nodeData"
            :label="item.node_name"
            :value="item.id"
            :key="index"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="nextStep" size="small" type="primary">下一步</el-button>
      </el-form-item>
      </el-form>
  </div>
</template>
<script>
import {worldSimControllerOptions,logSimControllerOptions, mapTestControllerOptions, mapSceneOptions} from '@/business/const'
import { mapGetters } from 'vuex'
import {getPncList} from '@/api/pnc'
import {fetchNodeList } from '@/api/node'
  export default {
    data(){
      return {
        // 新增和修改共用规则
        formRules: {
          session_name: [
            { required: true, message: '请输入案例名称', trigger: 'blur' }
          ],
          pnc_version: [
            { required: true, message: '请选择算法版本', trigger: 'blur' }
          ],
        },
        pncList: [],
        dynamic_model_list: worldSimControllerOptions,
        nodeData: [],
        sceneOptions: mapSceneOptions
      }
    },
    computed: {
      ...mapGetters(['createCaseForms']),
      curSimType(){
        return this.createCaseForms.sim_type
      },
      addForm(){
        return this.createCaseForms
      }
    },
    watch: {
      // 切换跑法时候，将第二步选中的值清空
      curSimType(newVal){
        this.$store.dispatch('case/setSelectedCaseIds', [])
        this.$store.dispatch('case/setSelectedCaseGroupIds', [])
        this.$store.dispatch('case/setSelectedCaseCategoryIds', [])
      }
    },
    created() {
      this.getPncList()
      this.getNodeList()
    },
    methods:{
    getNodeList(){
        fetchNodeList().then((res) => {
          if(res && res.data){
            this.nodeData = res.data
          }
        }).catch(err => {
          this.$message.error(err)
        })
      },
      //获取pnc 版本list
      getPncList(){
        getPncList().then(res => {
          if(res.versions && res.versions.length >0){
            this.pncList = res.versions
          }
          else{
            this.pncList = []
          }
        }).catch(err => {
          console.log(err)
        })
      },
      // 下一步
      nextStep(){
        this.$refs.addForm.validate((valid) => {
          if (valid) {
            if((this.addForm.sim_type === 'amap' || this.addForm.sim_type === 'amap_traffic') && !this.addForm.scene_mode ){
              this.$message.warning('请选择场景类型')
              return
            }
            // 校验表单通过后，将表单数据存入store中，在最后一步提交时使用
            this.$store.dispatch('case/setCaseForms', this.addForm);
            this.$emit('nextStep')
          }
        })
      },
      simTypeChange(val) {
        switch (val){
          case 'worldsim': 
            this.dynamic_model_list = worldSimControllerOptions
            break;
          case 'log2world': 
            this.dynamic_model_list = logSimControllerOptions
            break;
          case 'amap': 
            this.dynamic_model_list = mapTestControllerOptions
            break;
          case 'amap_traffic': 
            this.dynamic_model_list = mapTestControllerOptions
            break;
          default: 
            this.dynamic_model_list = logSimControllerOptions
            break;
        }
        this.createCaseForms.controller = this.dynamic_model_list[0].value
      }
    }
  }
</script>

<style lang="scss" scoped>
@import '@/styles/vars.scss';
  .step-1-container{
    margin-top: 20px;
    .el-form {
      ::v-deep .el-input__inner{
        width:300px;
      }
    }
  }
</style>